{{#if isFilesystem}}
<route lang="yaml">
meta:
  title: 编辑页
</route>

{{/if}}
<!--
  *  @description {{cname}}详情展示方式: 路由跳转页
  *  @author ${USER}
  *  @date ${DATE}
-->
<script setup lang="ts">
// 引入系统配置（判断返回是否需关闭界面标签栏）
import useSettingsStore from '@/store/modules/settings'
// 父子组件事件交互
import eventBus from '@/utils/eventBus'
// 表单容器
import DetailForm from './components/DetailForm/index.vue'
// 全局唯一name
defineOptions({
  name: '{{ componentName }}',
})
// 路由跳转实现
const route = useRoute()
// 用于获取父级路由跳转的参数
const router = useRouter()
// 用于关闭标签页
const tabbar = useTabbar()
// 获取系统配置
const settingsStore = useSettingsStore()
// 获取表单实例
const formRef = useTemplateRef('formRef')
// 提交处理
function onSubmit() {
  formRef.value?.submit().then(() => {
    // 触发父级页面事件
    eventBus.emit('get-data-list')
    goBack()
  })
}
// 关闭按钮
function onCancel() {
  goBack()
}

// 返回按钮
function goBack() {
  // 系统配置中，开启了标签栏，并且标签合并规则不是 根据路由的 `meta.activeMenu` 字段，与指向的目标路由合并， 则关闭当前标签页
  // 反之则直接跳转到列表页面
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.close({ name: 'pagesExampleGeneralFormModeList' })
  }
  else {
    router.push({ name: 'pagesExampleGeneralFormModeList' })
  }
}
</script>

<template>
  <div>
    <!-- 顶部区域: 标题、返回按钮 -->
    <FaPageHeader :title="route.name === 'routerName' ? '新增{{ cname }}' : '编辑{{ cname }}'">
      <ElButton size="default" round @click="goBack">
        <template #icon>
          <FaIcon name="i-ep:arrow-left" />
        </template>
        返回
      </ElButton>
    </FaPageHeader>
    <!-- 内容区: 引入DetailForm组件 -->
    <FaPageMain>
      <ElRow>
        <ElCol :md="24" :lg="16">
          <DetailForm :id="route.params.id as string" ref="formRef" />
        </ElCol>
      </ElRow>
    </FaPageMain>
    <!-- 按钮功能区 -->
    <FaFixedActionBar>
      <ElButton type="primary" size="large" @click="onSubmit">
        提交
      </ElButton>
      <ElButton size="large" @click="onCancel">
        取消
      </ElButton>
    </FaFixedActionBar>
  </div>
</template>

<style scoped>
/* 样式 */
</style>
